import React, { useEffect, useState, useRef } from 'react';
import { history, connect, formatMessage } from 'umi';
import request from '@/utils/request';
import { stringify } from 'qs';
import authHelpr from '@/utils/auth/helper';
import {
    Button,
    Col,
    Form,
    Row,
    Select,
    Spin,
    Checkbox,
    Tooltip,
    Icon,
    Card,
    TimePicker,
    InputNumber,
    message,
    Empty
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { TreeSelectForm } from '@/components/UserForm';
import { getCompanyTree } from '@/services/components/userform';
import { get as getPath } from 'object-path';
import { withRoutePage } from '@/utils/enhanceUtils';
import moment from 'moment';
import pageTabUtil from '@/utils/pageTabUtil';
import styles from './index.less';

const { Item } = Form;
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
    }
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0
        },
        sm: {
            span: 8,
            offset: 4
        }
    }
};
const { checkCode } = authHelpr;

const RuleEdit = props => {
    const { dispatch, ruleManagement, location, form } = props;
    const { pathname, query } = location;
    const { detailData } = ruleManagement;
    const { getFieldDecorator } = form;
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const [isEdit, setIsEdit] = useState(true);
    const [spinning, setSpinning] = useState(false);
    const [submitLoading, setSubmitLoading] = useState(false);
    const [cancelLoading, setCancelLoading] = useState(false);
    const [flex, setFlex] = useState(false);
    const isFirstRun = useRef(true);
    const userCompanyId = user ? user.companyId : '';
    const localCompanyId = query.companyid;
    const [institutionList, setInstitutionList] = useState([]);
    const flexibleList = [
        {
            value: 15,
            label: '15分钟'
        },
        {
            value: 30,
            label: '30分钟'
        },
        {
            value: 45,
            label: '45分钟'
        },
        {
            value: 60,
            label: '60分钟'
        },
        {
            value: 75,
            label: '75分钟'
        },
        {
            value: 90,
            label: '90分钟'
        },
        {
            value: 105,
            label: '105分钟'
        },
        {
            value: 120,
            label: '120分钟'
        },
        {
            value: 135,
            label: '135分钟'
        },
        {
            value: 150,
            label: '150分钟'
        },
        {
            value: 165,
            label: '165分钟'
        },
        {
            value: 180,
            label: '180分钟'
        }
    ];
    const [startTime, setStartTime] = React.useState('');
    const [endTime, setEndTime] = React.useState('');
    // 修改弹性打卡编辑状态时控制上班最晚时间是否显示
    const onFlexChange = e => {
        setFlex(e.target.checked);
    };
    // 获取路由判断当前是编辑还是详情
    const getStatus = path => {
        if (path && path === '/setting/ruleManagement/edit') {
            setIsEdit(true);
        } else {
            setIsEdit(false);
        }
    };

    const getParams = (values, status) => {
        const institution = institutionList.filter(item => item.id === values.institutionId);
        const institutionName = institution[0] ? institution[0].institutionName : detailData.ruleVO.institutionName;
        const params = {
            companyCode: detailData.companyCode || query.companyid,
            ruleExceptionSimpleDTOS: [
                {
                    code: 'lateOne',
                    endMinute: values.lateOne,
                    name: formatMessage({
                        id: 'settings.ruleManage.late1'
                    }),
                    startMinute: 0,
                    type: 1
                },
                {
                    code: 'lateTwo',
                    endMinute: values.lackCard,
                    name: formatMessage({
                        id: 'settings.ruleManage.late2'
                    }),
                    startMinute: values.lateOne,
                    type: 1
                },
                {
                    code: 'earlyOne',
                    endMinute: values.earlyOne,
                    name: formatMessage({
                        id: 'settings.ruleManage.early1'
                    }),
                    startMinute: 0,
                    type: 2
                },
                {
                    code: 'earlyTwo',
                    endMinute: values.lackCard,
                    name: formatMessage({
                        id: 'settings.ruleManage.early2'
                    }),
                    startMinute: values.earlyOne,
                    type: 2
                },
                {
                    code: 'lackCard',
                    endMinute: 9999,
                    name: formatMessage({
                        id: 'settings.ruleManage.lack'
                    }),
                    startMinute: values.lackCard,
                    type: 3
                }
            ],
            ruleDTO: {
                companyCode: institutionList.companyId || query.companyid,
                flexibleStartTime: values.flexibleStartTime === undefined ? 0 : values.flexibleStartTime, // 上班最多可晚到分钟数
                flexibleWork: values.flexibleWork ? 1 : 0, // 弹性打卡：0：否1：允许晚到晚走、早到早走
                institutionId: values.institutionId, // 关联制度id
                institutionName, // 关联制度名称
                leaveTime: moment(values.leaveTime).format('HH:mm:ss'), // 下班时间
                workHours: values.workHours, // 工作时长
                workTime: moment(values.workTime).format('HH:mm:ss'), // 上班时间
                enable: status === 'edit' ? 1 : 0
            },
            groupName: formatMessage({
                id: 'settings.ruleManage.groupName'
            }),
            name: detailData.name,
            // enable: status === 'edit' ? 1 : 0,
            id: query.id
        };
        return params;
    };

    // 确认生效按钮
    const handleSubmit = () => {
        setSubmitLoading(true);
        form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                dispatch({
                    type: 'ruleManagement/fetchAddRule',
                    payload: getParams(values, 'edit'),
                    callback: response => {
                        if (response.code !== 10000) {
                            message.error(response.msg);
                        } else {
                            message.success(
                                formatMessage({
                                    id: 'settings.ruleManage.sure'
                                })
                            );
                            pageTabUtil.goBack();
                        }
                        setSubmitLoading(false);
                    }
                });
            } else {
                setSubmitLoading(false);
            }
        });
    };

    // 保存按钮
    const handleSave = () => {
        setCancelLoading(true);
        form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                dispatch({
                    type: 'ruleManagement/fetchAddRule',
                    payload: getParams(values, 'save'),
                    callback: response => {
                        if (response.code !== 10000) {
                            message.error(response.msg);
                        } else {
                            message.success(
                                formatMessage({
                                    id: 'settings.ruleManage.save'
                                })
                            );
                            pageTabUtil.goBack();
                        }
                        setCancelLoading(false);
                    }
                });
            } else {
                setCancelLoading(false);
            }
        });
    };
    // 获取详情
    const fetchDetail = () => {
        setSpinning(true);
        request(
            `/api/oa/v1/institutions/origin?${stringify({
                institutionType: 'personnel',
                companyId: localCompanyId || userCompanyId,
                expire: 0
            })}`,
            {
                method: 'GET'
            }
        ).then(response => {
            if (response.code === 10000) {
                setInstitutionList(response.data);
            }
        });
        dispatch({
            type: 'ruleManagement/fetchRuleDetail',
            payload: {
                groupId: query.id
            },
            callback: response => {
                if (response.code !== 10000) {
                    message.error(response.msg);
                }
                setSpinning(false);
            }
        });
    };
    // 申请修改规则
    const onEdit = () => {
        history.push(`/setting/ruleManagement/edit?id=${query.id}&companyid=${query.companyid}`);
    };
    /* 定义时间数组 */
    const Hours = Array.from(Array(24), (v, k) => k);
    const Minutes = Array.from(Array(60), (v, k) => k);
    const Seconds = Array.from(Array(60), (v, k) => k);

    const triggerChange = changedValue => {
        Object.assign({}, { start: startTime, end: endTime }, changedValue);
    };
    const handleDetail = id => {
        history.push(`/office/institutions/rulesManage/institutionsDetail?id=${id}`);
    };

    /* 结束时间控制-hour */
    const disEndHouse = () => {
        if (startTime) {
            const h = startTime.hour();
            return Hours.slice(0, h);
        }
        return [];
    };

    /* 结束时间控制-minute） */
    const disEndMinute = h => {
        if (startTime) {
            if (h > startTime.hour()) return [];
            const m = startTime.minute();
            return Minutes.slice(0, m);
        }
        return [];
    };

    /* 结束时间控制-second */
    const disEndSeconds = (h, m) => {
        if (startTime) {
            if (h > startTime.hour()) return [];
            if (m > startTime.minute()) return [];
            const s = startTime.second();
            return Seconds.slice(0, s);
        }
        return [];
    };

    /* 开始时间控制-hour */
    const disStartHouse = () => {
        if (endTime) {
            const h = endTime.hour();
            return Hours.slice(h, Hours.length - 1);
        }
        return [];
    };

    /* 开始时间控制-minute */
    const disStartMinute = h => {
        if (endTime) {
            if (h < endTime.hour()) return [];
            const m = endTime.minute();
            return Minutes.slice(m, Minutes.length - 1);
        }
        return [];
    };

    /* 开始时间控制-second */
    const disStartSeconds = (h, m) => {
        if (endTime) {
            if (h < endTime.hour()) return [];
            if (m < endTime.minute()) return [];
            const s = endTime.second();
            return Seconds.slice(s, Seconds.length - 1);
        }
        return [];
    };

    useEffect(() => {
        getStatus(pathname);
        fetchDetail();
        return () => {
            form.resetFields();
            dispatch({
                type: 'ruleManagement/clear'
            });
        };
    }, []);

    // 计算每日工作时长
    useEffect(() => {
        // 第一次不运行
        if (isFirstRun.current) {
            isFirstRun.current = false;
            return;
        }
        const tempTime = moment(form.getFieldValue('leaveTime')).diff(form.getFieldValue('workTime'), 'hours', true);
        const newTime = Math.round((Number(tempTime) - 1) * 100) / 100;
        form.setFieldsValue({
            workHours: newTime
        });
    }, [JSON.stringify(form.getFieldValue('workTime')), JSON.stringify(form.getFieldValue('leaveTime'))]);

    useEffect(() => {
        setFlex(form.getFieldValue('flexibleWork'));
    }, [JSON.stringify(form.getFieldValue('flexibleWork'))]);

    const getCompanyId = () => {
        if (isEdit) {
            return getFieldDecorator('companyId', {
                initialValue: getPath(detailData, 'companyCode') || localCompanyId,
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.companyTip'
                        })
                    }
                ]
            })(
                <TreeSelectForm
                    params={{
                        organizationCode: getPath(detailData, 'companyCode') || localCompanyId
                    }}
                    requireParam={['companyId']}
                    getData={params =>
                        getCompanyTree(params).then(res => {
                            if (res && res.code === 10000 && res.data) {
                                return res.data || [];
                            }
                            return [];
                        })
                    }
                    fieldsName={{
                        value: 'organizationCode',
                        title: 'organizationName'
                    }}
                    Props={{
                        placeholder: formatMessage({
                            id: 'settings.ruleManage.companyTip2'
                        }),
                        style: { width: '100%' },
                        showArrow: true,
                        disabled: true
                    }}
                />
            );
        }
        return getPath(detailData, 'companyName') || '';
    };

    const getWorkTime = () => {
        if (isEdit) {
            return getFieldDecorator('workTime', {
                initialValue:
                    getPath(detailData, 'ruleVO.workTime') &&
                    moment(getPath(detailData, 'ruleVO.workTime').substring(0, 5), 'HH:mm'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.workTimeTip'
                        })
                    }
                ]
            })(
                <TimePicker
                    format="HH:mm"
                    onChange={value => {
                        setStartTime(value);
                        triggerChange({ start: value });
                    }}
                    disabledHours={disStartHouse}
                    disabledMinutes={disStartMinute}
                    disabledSeconds={disStartSeconds}
                    style={{ width: '100%' }}
                />
            );
        }
        return getPath(detailData, 'ruleVO.workTime') && getPath(detailData, 'ruleVO.workTime').substring(0, 5);
    };

    const getLeaveTime = () => {
        if (isEdit) {
            return getFieldDecorator('leaveTime', {
                initialValue:
                    getPath(detailData, 'ruleVO.leaveTime') &&
                    moment(getPath(detailData, 'ruleVO.leaveTime').substring(0, 5), 'HH:mm'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.leaveTimeTip'
                        })
                    }
                ]
            })(
                <TimePicker
                    format="HH:mm"
                    onChange={value => {
                        setEndTime(value);
                        triggerChange({ end: value });
                    }}
                    disabledHours={disEndHouse}
                    disabledMinutes={disEndMinute}
                    disabledSeconds={disEndSeconds}
                    style={{ width: '100%' }}
                />
            );
        }
        return getPath(detailData, 'ruleVO.leaveTime') && getPath(detailData, 'ruleVO.leaveTime').substring(0, 5);
    };

    const getFlexibleStartTime = () => {
        if (getPath(detailData, 'ruleVO.flexibleWork') !== 0) {
            return `${formatMessage({
                id: 'settings.ruleManage.flexibleStartTime'
            })}${getPath(detailData, 'ruleVO.flexibleStartTime')}${formatMessage({
                id: 'settings.ruleManage.min'
            })}`;
        }
        return null;
    };

    const getLate1Tip = () => {
        if (isEdit) {
            return getFieldDecorator('lateOne', {
                initialValue: getPath(detailData, 'exceptionSimpleDTOS.0.endMinute'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.late1Tip'
                        })
                    }
                ]
            })(
                <InputNumber
                    style={{ width: '80%', marginRight: '8px' }}
                    min={0}
                    max={120}
                    placeholder={formatMessage({
                        id: 'settings.ruleManage.late1Tip'
                    })}
                />
            );
        }
        return `${getPath(detailData, 'exceptionSimpleDTOS.0.endMinute')}${formatMessage({
            id: 'settings.ruleManage.min2'
        })}`;
    };

    const getEndMinute = () => {
        if (isEdit) {
            return getFieldDecorator('earlyOne', {
                initialValue: getPath(detailData, 'exceptionSimpleDTOS.2.endMinute'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.early1Tip'
                        })
                    }
                ]
            })(
                <InputNumber
                    style={{ width: '80%', marginRight: '8px' }}
                    min={0}
                    max={120}
                    placeholder="请选择早退1时间"
                />
            );
        }
        return `${getPath(detailData, 'exceptionSimpleDTOS.2.endMinute')}${formatMessage({
            id: 'settings.ruleManage.min2'
        })}`;
    };

    const getLack = () => {
        if (isEdit) {
            return getFieldDecorator('lackCard', {
                initialValue: getPath(detailData, 'exceptionSimpleDTOS.4.startMinute'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.lackTip'
                        })
                    }
                ]
            })(
                <InputNumber
                    style={{ width: '80%', marginRight: '8px' }}
                    min={
                        form.getFieldValue('earlyOne') >= form.getFieldValue('lateOne')
                            ? form.getFieldValue('earlyOne')
                            : form.getFieldValue('lateOne')
                    }
                    max={180}
                    placeholder="请选择缺卡时间"
                />
            );
        }
        return `${getPath(detailData, 'exceptionSimpleDTOS.4.startMinute')}${formatMessage({
            id: 'settings.ruleManage.min3'
        })}`;
    };
    const getFormatter = value => {
        if (value) {
            return `${value}${formatMessage({
                id: 'settings.ruleManage.hour'
            })}`;
        }
        return '';
    };
    const getWorkHours = () => {
        if (isEdit) {
            return getFieldDecorator('workHours', {
                initialValue: getPath(detailData, 'ruleVO.workHours'),
                rules: [
                    {
                        required: true,
                        message: formatMessage({
                            id: 'settings.ruleManage.dayWorkTip2'
                        })
                    }
                ]
            })(
                <InputNumber
                    formatter={value => getFormatter(value)}
                    parser={value =>
                        value.replace(
                            formatMessage({
                                id: 'settings.ruleManage.hour'
                            }),
                            ''
                        )
                    }
                    placeholder={formatMessage({
                        id: 'settings.ruleManage.dayWorkTip3'
                    })}
                    style={{ width: '100%' }}
                    disabled
                />
            );
        }
        return `${getPath(detailData, 'ruleVO.workHours')}${formatMessage({
            id: 'settings.ruleManage.hour'
        })}`;
    };
    return (
        <PageHeaderWrapper>
            <Card
                bordered={false}
                headStyle={{ border: 'none' }}
                className={styles.ruleCard}
                title={
                    isEdit ? (
                        formatMessage({
                            id: 'settings.ruleManage.edit'
                        })
                    ) : (
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>
                                {formatMessage({
                                    id: 'settings.ruleManage.watch'
                                })}
                            </span>
                            {checkCode('system:ruleconfig:edit') ? (
                                <Button
                                    type="primary"
                                    ghost
                                    onClick={() => {
                                        onEdit();
                                    }}
                                >
                                    配置规则
                                </Button>
                            ) : (
                                ''
                            )}
                        </div>
                    )
                }
            >
                <Spin spinning={spinning} delay={0}>
                    {detailData && detailData.id ? (
                        <Form {...formItemLayout}>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.company'
                                })}
                                required={isEdit}
                            >
                                {getCompanyId()}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.institution'
                                })}
                                required={isEdit}
                            >
                                {isEdit ? (
                                    getFieldDecorator('institutionId', {
                                        initialValue:
                                            institutionList.filter(item => item.id === detailData.ruleVO.institutionId)
                                                .length === 0
                                                ? null
                                                : getPath(detailData, 'ruleVO.institutionId'),
                                        rules: [
                                            {
                                                required: true,
                                                message: formatMessage({
                                                    id: 'settings.ruleManage.institutionTip'
                                                })
                                            }
                                        ]
                                    })(
                                        <Select
                                            placeholder={formatMessage({
                                                id: 'settings.ruleManage.please'
                                            })}
                                        >
                                            {institutionList.map(item => (
                                                <Option key={item.id} value={item.id}>
                                                    {item.institutionName}
                                                </Option>
                                            ))}
                                        </Select>
                                    )
                                ) : (
                                    <span>
                                        {getPath(detailData, 'ruleVO.institutionName')}
                                        {getPath(detailData, 'ruleVO.institutionName') ? (
                                            <Button
                                                onClick={() => {
                                                    handleDetail(getPath(detailData, 'ruleVO.institutionId'));
                                                }}
                                                style={{ marginLeft: '8px' }}
                                            >
                                                {formatMessage({
                                                    id: 'settings.ruleManage.look'
                                                })}
                                            </Button>
                                        ) : null}
                                    </span>
                                )}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.currency'
                                })}
                            >
                                {formatMessage({
                                    id: 'settings.ruleManage.groupName'
                                })}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.workTime'
                                })}
                                required={isEdit}
                            >
                                {getWorkTime()}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.leaveTime'
                                })}
                                required={isEdit}
                            >
                                {getLeaveTime()}
                            </Item>
                            <Item
                                label={
                                    <span>
                                        {formatMessage({
                                            id: 'settings.ruleManage.dayWork'
                                        })}
                                        &nbsp;
                                        <Tooltip
                                            title={formatMessage({
                                                id: 'settings.ruleManage.dayWorkTip'
                                            })}
                                        >
                                            <Icon type="info-circle" />
                                        </Tooltip>
                                    </span>
                                }
                            >
                                {getWorkHours()}
                            </Item>
                            {isEdit ? (
                                <div>
                                    <Item
                                        label={formatMessage({
                                            id: 'settings.ruleManage.flexibleWork'
                                        })}
                                        style={{ marginBottom: '16px' }}
                                    >
                                        {getFieldDecorator('flexibleWork', {
                                            valuePropName: 'checked',
                                            initialValue: getPath(detailData, 'ruleVO.flexibleWork') !== 0
                                        })(
                                            <Checkbox onChange={onFlexChange} key="1">
                                                {formatMessage({
                                                    id: 'settings.ruleManage.flexibleWorkCheck'
                                                })}
                                            </Checkbox>
                                        )}
                                    </Item>
                                    {flex ? (
                                        <Item {...tailFormItemLayout}>
                                            {formatMessage({
                                                id: 'settings.ruleManage.flexibleStartTime'
                                            })}
                                            {getFieldDecorator('flexibleStartTime', {
                                                initialValue:
                                                    getPath(detailData, 'ruleVO.flexibleStartTime') === 0
                                                        ? 15
                                                        : getPath(detailData, 'ruleVO.flexibleStartTime')
                                            })(
                                                <Select style={{ width: '50%', margin: '0 15px' }}>
                                                    {flexibleList.map(item => (
                                                        <Option key={item.value} value={item.value}>
                                                            {item.label}
                                                        </Option>
                                                    ))}
                                                </Select>
                                            )}
                                            <Tooltip
                                                title={formatMessage({
                                                    id: 'settings.ruleManage.flexibleStartTimeTip'
                                                })}
                                            >
                                                <Icon type="info-circle" />
                                            </Tooltip>
                                            <h1>{flex}</h1>
                                        </Item>
                                    ) : null}
                                </div>
                            ) : (
                                <div>
                                    <Item
                                        label={formatMessage({
                                            id: 'settings.ruleManage.flexibleWork'
                                        })}
                                    >
                                        <Checkbox disabled checked={getPath(detailData, 'ruleVO.flexibleWork') !== 0}>
                                            {formatMessage({
                                                id: 'settings.ruleManage.flexibleWorkCheck'
                                            })}
                                        </Checkbox>
                                        {getFlexibleStartTime()}
                                        {getPath(detailData, 'ruleVO.flexibleWork') !== 0 ? (
                                            <Tooltip
                                                title={formatMessage({
                                                    id: 'settings.ruleManage.flexibleStartTimeTip'
                                                })}
                                            >
                                                <Icon type="info-circle" style={{ marginLeft: '3px' }} />
                                            </Tooltip>
                                        ) : null}
                                    </Item>
                                </div>
                            )}

                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.late1'
                                })}
                                style={{ display: 'flex', justifyContent: 'flex-start' }}
                            >
                                {getLate1Tip()}
                                {isEdit ? (
                                    <span>
                                        {formatMessage({
                                            id: 'settings.ruleManage.min2'
                                        })}
                                    </span>
                                ) : (
                                    ''
                                )}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.late2'
                                })}
                            >
                                {formatMessage({
                                    id: 'settings.ruleManage.late2Tip'
                                })}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.early1'
                                })}
                                style={{ display: 'flex', justifyContent: 'flex-start' }}
                            >
                                {getEndMinute()}
                                {isEdit ? (
                                    <span>
                                        {formatMessage({
                                            id: 'settings.ruleManage.min2'
                                        })}
                                    </span>
                                ) : (
                                    ''
                                )}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.early2'
                                })}
                            >
                                {formatMessage({
                                    id: 'settings.ruleManage.early2Tip'
                                })}
                            </Item>
                            <Item
                                label={
                                    <span>
                                        {formatMessage({
                                            id: 'settings.ruleManage.lack'
                                        })}
                                        &nbsp;
                                        <Tooltip
                                            title={formatMessage({
                                                id: 'settings.ruleManage.lackTip2'
                                            })}
                                        >
                                            <Icon type="info-circle" />
                                        </Tooltip>
                                    </span>
                                }
                                style={{ display: 'flex', justifyContent: 'flex-start' }}
                            >
                                {getLack()}
                                {isEdit ? (
                                    <span>
                                        {formatMessage({
                                            id: 'settings.ruleManage.min3'
                                        })}
                                    </span>
                                ) : (
                                    ''
                                )}
                            </Item>
                            <Item
                                label={formatMessage({
                                    id: 'settings.ruleManage.absence'
                                })}
                            >
                                {formatMessage({
                                    id: 'settings.ruleManage.absenceTip'
                                })}
                            </Item>
                            {isEdit && (
                                <Item style={{ marginBottom: 4 }} {...tailFormItemLayout}>
                                    <Row justify="start" type="flex" gutter={12}>
                                        <Col>
                                            <Button loading={submitLoading} type="primary" onClick={handleSubmit}>
                                                {formatMessage({
                                                    id: 'settings.ruleManage.sureBtn'
                                                })}
                                            </Button>
                                        </Col>
                                        <Col>
                                            <Button loading={cancelLoading} onClick={handleSave}>
                                                {formatMessage({
                                                    id: 'settings.ruleManage.saveBtn'
                                                })}
                                            </Button>
                                        </Col>
                                    </Row>
                                </Item>
                            )}
                        </Form>
                    ) : (
                        <Empty />
                    )}
                </Spin>
            </Card>
        </PageHeaderWrapper>
    );
};
export default withRoutePage(
    connect(({ ruleManagement, loading }) => ({
        ruleManagement,
        loading
    }))(Form.create()(RuleEdit))
);
